<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>角色信息页面</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">

<style>
.layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
	height: 34px;
	line-height: 34px;
	padding: 0 8px;
}
</style>
</head>
<body>
	<div class="layuimini-container">
		<div class="layuimini-main">
			<div class="layui-form" style="margin-top: 20px;" onsubmit="false">
				<div class="layui-form-item">
					<label class="layui-form-label">角色名称:</label>
					<div class="layui-input-inline">
						<input type="text" name="rolename" id="rolename"
							placeholder="请输入角色名称" class="layui-input">
					</div>
					<button class="layui-btn" id="search" data-type="reload">搜索</button>
				</div>
			</div>
			<div>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>
	</div>


	<!-- 操作列 -->
	<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="editRoles">编辑</a>
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-mod" lay-event="mod">设置树状模块</a>
            <a class="layui-btn layui-btn-xs" lay-event="setrolesmenus">设置菜单栏</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delRoles">删除</a>
		</script>
	<script type="text/html" id="toolbarDemo">
      <!--表头上面引入了一个添加角色的操作-->
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addRoles">添加</button>
      </div>
    </script>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script src="js/Global.js" type="text/javascript" charset="utf-8"></script>
	<script>
		layui.use([ 'form', 'table' ],  function() { //如果只加载一个模块，可以不填数组。如：layui.use('form')
			var table = layui.table; //获取table模块
			var form = layui.form;
			var $ = layui.jquery;
			// 渲染表格
			table.render({
				elem : '#test',
				url : globalData.server+'public/getAllRoles',
				toolbar : '#toolbarDemo', //开启头部工具栏
				where : {
					method : 'getAll',
					rolename : ''
				},
				method : 'POST',
				cols : [ [ {
					field : 'roleid',
					title : '角色ID',
					fixed : 'left',
					align:'center',
					sort : true,
					width : 120,
				}, {
					field : 'rolename',
					title : '角色名称',
					align:'center',
					width : 120,
				}, {
					title : '操作',
					fixed : 'right',
					align : 'center',
					toolbar : '#barDemo',
					width : 300
				} ] ],
				id : 'testReload',
				page : true
			});
			
		
			
			
			
			$('#search').on('click', function() {
				var rolename = $("#rolename").val();
				table.reload('testReload', {
					where : {
						'rolename' : rolename
					}
				});
			});
			//监听提交按钮
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				if (obj.event === 'delRoles') {
					layer.confirm('真的删除该角色吗?', function(index) {
						console.log(obj.data);
						var url = globalData.server+'public/deleteRoles';
						$.post(url, {
							"roleid" : obj.data.roleid,
							method : 'delete'
						}, function(data) {
							if(data.count > 0) {
								layer.msg("删除成功", {
									icon: 1,
									time: 3000
								});
								obj.del();
								window.location.reload();
							} else if(data.count == -1){
								layer.msg("删除失败,该角色下关联有用户信息!!!", {
									icon: 2,
									time: 3000
								})
							}
						}, "json");
					});
				} else if (obj.event === 'editRoles') {
					console.log(obj.data);
					layer.open({ //打开一个页面
						type : 2, //在当前的页面之上，弹框形式，展示出添加角色的界面
						area : [ '550px', '300px' ], //页面的宽高
						content : 'Roles_edit.html', //页面所在的位置
						title : '编辑角色信息',
						fix:false,
						maxmin:true,
						success : function(layero, index) {
							console.log(obj.data);
							var body = layer.getChildFrame('body', index);
							body.contents().find("#roleid").val(obj.data.roleid);
							body.contents().find("#rolename").val(obj.data.rolename);
						},
						end : function() {
							window.location.reload();
						}
					});
				}else if (obj.event === 'setrolesmenus') {
            		var index = layer.open({
    					title : '给'+ data.rolename +'设置菜单栏',
    					type : 2,
    					shade : 0.2,
    					maxmin : true,
    					shadeClose : true,
    					area : [ '550px', '510px' ], //页面的宽高
    					content : 'SetRolesmenus.html',
    					success : function(layero, index) {
    						var body = layer.getChildFrame('body', index);
    							body.find("#roleid").val(data.roleid);
    					},
    					end : function() {
    						window.location.reload();
    					}
    				});
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                }else if(obj.event === 'mod') {
					layer.open({
						type: 2, //打开iframe
						title: "选择模块",
						/* area : [ '100%', '100%' ], */
						area : [ '550px', '510px' ], //页面的宽高
						content: "treestat.html",
						success: function(layero, index) {
							var body = layer.getChildFrame('body', index);
							body.find("#roleid").val(data.roleid);
						},
						end: function() {
							window.location.reload();
						}
					});
				}
    				
    				
    				
    				
    			});
			table.on('toolbar(test)', function(obj) {
				switch (obj.event) {
				case 'addRoles':
					layer.open({
						type : 2,
						area : [ '550px', '300px' ], //页面的宽高
						content : 'Roles_add.html',
						title : '添加角色信息',
						fix:false,
						maxmin:true,
						end : function() {
							window.location.reload();
						}
					});
					break;
				}
				;
			});
		});
	</script>
	
</body>
</html>